<template>
    <lay-layer v-model="visible" :title="layer_title" :area="['600px', '500px']" :shadeClose="shadeClose" :maxmin="true"
        :moveOut="true" :resize="true" closeBtn="1" :end="end" :close="close" :beforeClose="beforeClose">
        <lay-form :model="modelForm" ref="layFormRef" required>

            <div style="padding:10px 10px 0px 10px;margin: 0px;">
                <lay-form-item style="text-align: left;padding:0px;margin: 0px;">
                    <!-- <lay-button size="sm" @click="original" v-show="http_r_p == 'up'">还原</lay-button> -->
                    <lay-button size="sm" type="primary" @click="submit">提交</lay-button>
                </lay-form-item>
            </div>

            <lay-tab type="card" v-model="laytabvmodel">
                <lay-tab-item title="基础信息" id="1">
                    <div style="padding:0px 10px 0px 10px;">

                        <lay-form-item label="名称">
                            <lay-input v-model="modelForm.name" placeholder="请输入名称"></lay-input>
                        </lay-form-item>


                        <lay-form-item label="类型" prop="type">
                            <lay-radio v-model="modelForm.type" name="type" value="USER">普通</lay-radio>
                            <lay-radio v-model="modelForm.type" name="type" value="AGENT">代理</lay-radio>
                            <lay-radio v-model="modelForm.type" name="type" value="ADMIN">管理</lay-radio>

                        </lay-form-item>
                        <lay-form-item label="状态" prop="state">
                            <lay-radio v-model="modelForm.state" name="state" value="A">正常</lay-radio>
                            <lay-radio v-model="modelForm.state" name="state" value="B">停用</lay-radio>
                        </lay-form-item>



                    </div>
                </lay-tab-item>



                <lay-tab-item title="附加信息" id="4">
                    <div style="padding:0px 10px 0px 10px;">


                        <lay-form-item label="密码">
                            <lay-input v-model="modelForm.pw" type="password" password
                                placeholder="请输入新密码,默认密码为123456"></lay-input>
                        </lay-form-item>
                        <lay-form-item label="备注">
                            <lay-textarea placeholder="请输入描述" v-model="modelForm.memo"></lay-textarea>
                        </lay-form-item>
                    </div>
                </lay-tab-item>
            </lay-tab>
        </lay-form>
    </lay-layer>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { layer } from '@layui/layui-vue';
// import { toJSONString, random } from 'xe-utils';
import { number } from 'echarts';
import { userUP, userNEW } from "../../../api/module/user"; //请求模块

// const props = defineProps(['upbd']);
// const emit = defineEmits(['update:upbd', 'topClick']);
const emit = defineEmits(['topClick']);
const layer_title = ref('新增');//弹窗标题
const shadeClose = ref(true);//遮盖层关闭
const http_r_p = ref('up');//新增还是修改
const visible = ref(false);// 弹窗显示
const layFormRef = ref();

const laytabvmodel = ref("1")
// 表单字段
const modelForm = ref({
    "id": 0,
    "pw": "",
    "type": "USER",// 用户类型_ADMIN-AGENT-VIP-WX-USER-POS
    "state": "A",// 用户状态_A正常B停用
    "name": "",//名称
    'dbid': "", //数据编号.唯一
    'uid': "", //登录帐号.唯一
    'mobile': "", //登录手机.唯一
    'email': "", //登录邮箱.唯一
    'memo': "", //备注
});

const form = reactive({});//缓存旧数据为还原表单做准备

const childFun = (op: string, data: any) => {
    // op='up'//修改模式
    // op='new'//新增模式
    visible.value = !visible.value;
    if (op == 'up') {
        http_r_p.value = 'up';//新增还是修改
        layer_title.value = '修改';//弹窗标题
        shadeClose.value = true;//遮盖层关闭
        modelForm.value = data;//把上级行数据填到窗口中
        Object.assign(form, { ...data });
    } else {
        http_r_p.value = 'new';//新增还是修改
        layer_title.value = '新增';//弹窗标题
        shadeClose.value = false;//遮盖层关闭
        modelForm.value = {
            "id": 0,
            "pw": "",
            "type": "USER",// 用户类型_ADMIN-AGENT-VIP-WX-USER-POS
            "state": "A",// 用户状态_A正常B停用
            "name": "",//名称
            'dbid': "", //数据编号.唯一
            'uid': "", //登录帐号.唯一
            'mobile': "", //登录手机.唯一
            'email': "", //登录邮箱.唯一
            'memo': "", //备注
        }
    }
};
// 原始数据
const original = () => { Object.assign(modelForm.value, { ...form }); };
// 清空表单
const reset = () => { layFormRef.value.reset(); };
// 清除校验
const clearValidate = () => { layFormRef.value.clearValidate(); };
// 窗口销毁
const end = () => { };
// 窗口关闭
const close = () => { };
// 窗口关闭前置
const beforeClose = () => { original(); };
// 提交表单
const submit = function () { layFormRef.value.validate((isValidate: any, model: any, errors: any) => { if (isValidate) { http_r('new', model); } else { } }); }
// HTTP请求
const http_r = async (op: string, UDB: any) => {

    //新增还是修改
    if (http_r_p.value == 'up') {
        let data = await userUP(UDB);//HTTP
        console.log(data);
        if (data.code == 200) {
            layer.msg(data.msg, { icon: 1 }, async () => {
                emit('topClick', '父组件事件');
                visible.value = !visible.value;
            });
        } else {
            layer.msg(data.msg, { icon: 2 });
        }
    } else if (http_r_p.value == 'new') {
        let data = await userNEW(UDB);//HTTP
        if (data.code == 200) {
            layer.msg(data.msg, { icon: 1 }, async () => {
                emit('topClick', '父组件事件');
                visible.value = !visible.value;
            });
        } else {
            layer.msg(data.msg, { icon: 2 });
        }
    } else { }

};


//向父组件暴露子组件的方法或者数据
defineExpose({ childFun, });
</script>